<template>
  <div class="dib">
    <Upload
      ref="upload"
      class="dib"
      :show-upload-list="false"
      :on-success="handleSuccess"
      :format="['jpg','jpeg','png']"
      :max-size="maxSize"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleMaxSize"
      :before-upload="handleBeforeUpload"
      :name="uploadName"
      :action="uploadUrl"
      :data="extraParam"
      :headers="headers"
    >
      <el-button type="primary" :icon="icon" :loading="loading">{{ btnText }}</el-button>
      <span v-show="false">{{ item[nameModelName] }}</span>
    </Upload>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'HeyUpload',
  components: {

  },
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    urlField: {
      type: String
    },
    nameField: {
      type: String
    },
    btnText: {
      type: String,
      default: '上传'
    },
    extraParam: {
      type: Object,
      default: () => ({})
    },
    beforeUpload: {
      type: Function,
      default: () => () => {}
    },
    icon: {
      type: String,
      default: 'el-icon-upload'
    },
    maxSize: {
      type: Number,
      default: 5120
    }
  },
  data() {
    let { urlField = 'imgUrl', nameField } = this
    urlField = urlField || 'imgUrl'
    nameField = nameField || 'imgName'
    return {
      loading: false,
      urlModelName: urlField,
      nameModelName: nameField,
      uploadUrl: 'ptbk' + process.env.VUE_APP_UPLOAD_URL, // process.env.VUE_APP_BASE_API
      uploadName: 'file',
      uploadData: {
      }
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ]),
    headers() {
      return {
        token: this.token
      }
    }
  },
  watch: {
  },
  created() {

  },
  mounted() {
  },
  methods: {
    handleUpload() {
      this.$refs.upload.handleClick()
    },
    handleSuccess(res, file) {
      this.updateLoading(false)
      // process.env.IMG_FILE_PATH
      const imgUrl = res.data
      const { item, urlModelName, nameModelName } = this
      if (item) {
        item[urlModelName] = imgUrl
        item[nameModelName] = file.name
      }
      this.$emit('handleSuccess', res, file, item)
    },
    handleError() {
      this.$warn({
        title: '上传结果',
        type: 'error',
        message: '上传失败！'
      })
      this.updateLoading(false)
      /* const { item, type, urlModelName, nameModelName } = this
        if (type === 'img') {
          item[urlModelName] = process.env.UPLOAD_URL
          item[nameModelName] = process.env.UPLOAD_NAME
        } else {
          item[urlModelName] = process.env.UPLOAD_URL
          item[nameModelName] = process.env.UPLOAD_NAME
          item.avUrl = ''
        } */
    },
    handleFormatError(file) {
      this.$warn({
        title: '上传结果',
        type: 'error',
        message: '上传失败！'
      })
      this.updateLoading(false)
    },
    handleMaxSize(file) {
      this.$warn({
        title: '上传结果',
        type: 'warning',
        message: '超过最大文件大小5M！'
      })
      this.updateLoading(false)
    },
    updateLoading(flag) {
      this.loading = flag
      this.$emit('update:loading', flag)
    },
    handleBeforeUpload(file) {
      if (this.beforeUpload() === false) {
        return
      }
      this.updateLoading(true)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
